<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>页面渲染步骤</h2>
    <h3>加载过程</h3>
    <h5>1、DNS解析 域名->ip地址</h5>
    <h5>2、浏览器根据IP地址向服务器发起http请求 （http链接三次握手）</h5>
    <h5>3、服务器处理http请求 并返回浏览器</h5>
    <h3>渲染过程</h3>
    <h5>1、根据HTML代码生成DOM Tree</h5>
    <h5>2、根据CSS代码生成CSSOM</h5>
    <h5>3、将DOM Tree和CSSOM整合形成Render Tree（渲染树）</h5>
    <h5>4、根据Render Tree渲染页面</h5>
    <h5>5、遇到'script'暂停渲染,优先加载并执行完js再渲染 （js线程和Dom公用一个线程 因为js可能影响Dom）</h5>
    <h5>6、直到Render渲染完成 则完成页面渲染</h5>
    <h2>性能优化 （空间换时间）</h2>
    <h3>让加载更快</h3>
    <h5>减少资源体积：压缩代码</h5>
    <h5>减少访问次数：合并代码，ssr服务器端渲染 缓存(hash)</h5>
    <h5>使用更快的网络：cdn （区域服务器ip）</h5>
    <h3>让渲染更快</h3>
    <h5>css放head里面，js放body最下面</h5>
    <h5>尽早执行JS 用DomContentLoaded触发</h5>
    <h5>对dom查询进行缓存 （.length 变量）</h5>
    <h5>频繁Dom操作合并一起插入Dom结构</h5>
    <h5>节流throttle防抖debounce</h5>
    <script>
        var b = 2;

        function a() {
            var c = 6
            b = c
            console.log(c, '2222')
            return b

        }
        a()
        console.log(b, '4444444')
        b = 7;
        console.log(b, '1111111')

        let a = 100

        function aa() {
            console.log(a, '1') //100 1
            a = 10
            console.log(a, '2') //10 2
        }
        aa()
        console.log(a, '0') //10 0


        let a = 100

        function aa() {
            alert(a, '1')
            a = 10
            alert(a, '2')
        }
        aa()
        alert(a, '0')
    </script>
</body>

</html>